json2html：将JSON对象转换为HTML

资讯频道 → Web前端

6顶
4踩

2013-05-29 17:59 by 副主编 wangguo 评论(13) 有48390人浏览

json html json2html JavaScript 模板引擎

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

json2html是一个基于JavaScript的HTML模板库，顾名思义，该库主要用于将JSON对象转换为HTML格式。

使用json2html进行JSON转换，需要先通过JSON来指定转换规则，比如使用转换对象的名称值或属性值作为DOM HTML元素的属性。以下是几个预留的属性名：

tag：指定DOM元素的类型（div、span等）
html：指定DOM元素需要包含的内容
children：指定DOM元素的下一级内容

示例：

var transform = {'tag':'li','html':'${name} (${age})'};

var data = [
      {'name':'Bob','age':40},
      {'name':'Frank','age':15},
      {'name':'Bill','age':65},
      {'name':'Robert','age':24}
];

document.getElementById('list').innerHTML = json2html.transform(data,transform);

结果如下：

<ul id="list">
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>

json2html提供了以下两种形式，以便在服务器端和客户端都能使用：

jQuery插件形式：扩展了jQuery的核心库，包含了jquery事件
node.js包形式：可用于基于node.js的web服务器

项目官网：http://json2html.com/

查看图片附件

分享到：

6
顶

4
踩

评论共 13 条请登录后发表评论

13 楼 skzr.org 2013-05-31 21:45

非常nice，已经有相关的技术了，可以参考下：http://angularjs.org/
或者国内的社区：http://angularjs.cn/

12 楼 elgs 2013-05-31 02:30

JSON is ruling the world now.

11 楼 JanckyWong 2013-05-30 20:16

怎么用l?js来用？

10 楼 damoqiongqiu 2013-05-30 13:23

没有类似Ext那种HTML模板机制，对于复杂的JSON对象，做起来确实比较吃力。

9 楼 cgs1999 2013-05-30 11:13

这个比较适合简单的处理，复杂的处理貌似不适合。

目前使用artTemplate来进行类似的处理
http://aui.github.io/artTemplate/

例子
-------------------------------------------------------------------

<script>
var userTmpl = template('userTmpl', {mts:data});
document.getElementById('userList').innerHTML = userTmpl;
</script>

<script id="userTmpl" type="template">
{each mts as mt i}
 <li id="mt-{mt.mtNO}"  class="clearfix mt {if !mt.online}offline{/if}" data-mtno="{mt.mtNO}" data-type="{mt.mtType}">
		<div class="border clearfix">
			   <div class="left">
					<div class="face">
					   {if mt.online}
						 <div><img src="{mt.portrait}"/></div>
					   {else}
					      <div><img class="offline" src="{mt.portrait}"/></div>
					   {/if}
					</div>
				</div>
				<div class="con">
					<div class="con_right">
								
						<div class="mcc-action">
									{if mt.online}
										<a class="del" title="删除与会方" style="display:none"></a>
									{else}
										<a class="del" title="删除与会方"></a>
									{/if}

						            {if mt.callState==-1}
									   <a class="call" title="呼叫"></a>
                                       <a class="hang-up" title="挂断" style="display:none;"></a>
									{else if mt.callState==1}
									    <a class="hang-up" title="挂断"></a>
										<a class="call" title="呼叫" style="display:none;"></a>
									{else}
                                         <a class="call" title="呼叫" style="display:none;"></a>
									     <a class="hang-up" title="挂断" style="display:none;"></a>
									{/if}

                                    {if mt.silenceView}
                                        <a class="silence" title="设置静音"></a>									 
									{else}
                                        <a class="silence" title="设置静音" style="display:none;"></a>
									{/if}
									

                                    {if mt.unsilenceView}
                                        <a class="unsilence" title="取消静音"></a>
									{else}
                                        <a class="unsilence" title="取消静音" style="display:none;"></a>
									{/if}


                                    {if mt.unmuteView}
									    <a class="unmute" title="取消哑音" ></a>
									{else}
                                        <a class="unmute" title="取消哑音" style="display:none;"></a>
									{/if}

									{if mt.muteView}
                                        <a class="mute" title="设置哑音" ></a>
									{else}
                                        <a class="mute" title="设置哑音" style="display:none;"></a>
									{/if}
						            
									{if mt.chairmanView}
                                       <a class="chairman" title="设为管理方"></a>
									{else}
                                       <a class="chairman" title="设为管理方" style="display:none;"></a>
									{/if}

									{if mt.unchairmanView}
									   <a class="unchairman" title="取消管理方"></a>
									{else}
									   <a class="unchairman" title="取消管理方" style="display:none;"></a>
									{/if}
                                  
								    {if mt.speakerView}
								       <a class="speaker" title="设置发言方"></a>
									{else}
									  <a class="speaker" title="设置发言方" style="display:none;"></a>
									{/if}
									  
									{if mt.unspeakerView}
									   <a class="unspeaker" title="取消发言方"></a> 
									 {else}
									   <a class="unspeaker" title="取消发言方" style="display:none;"></a> 
									{/if}

									 
									 
						</div>
					</div>
					<div class="con_left">
						<div class="name" data-pinyin="{mt.pinyin}">{mt.mtAlias}</div>
						<div class="status">
							  <div class="current-status">
							      {if mt.online}
									  {if mt.secVideoState}
									    <a class="two-stream"></a>
									  {else}
									     <a class="two-stream" style="display:none;"></a> 
									  {/if}

									  {if mt.speakerState}
									    <a class="speaker"></a>
									  {else}
									     <a class="speaker" style="display:none;"></a> 
									  {/if}

									  {if mt.vmpState}
									    <a class="vmp"></a>
									  {else}
									     <a class="vmp" style="display:none;"></a> 
									  {/if}

									  {if mt.discussState}
									    <a class="discuss"></a>
									  {else}
									     <a class="discuss" style="display:none;"></a> 
									  {/if}

									  {if mt.chairmanState}
									    <a class="chairman"></a>
									  {else}
									     <a class="chairman" style="display:none;"></a> 
									  {/if}

									  {if mt.silenceState}
									    <a class="silence"></a>
									  {else}
									     <a class="silence" style="display:none;"></a> 
									  {/if}

									  {if !mt.muteState}
									    <a class="unmute"></a>
									  {else}
									     <a class="unmute" style="display:none;"></a> 
									  {/if}
								   {else}	
								       <a class="two-stream" style="display:none;"></a> 
								       <a class="speaker" style="display:none;"></a>
								       <a class="vmp" style="display:none;"></a> 
								       <a class="discuss" style="display:none;"></a> 
								       <a class="chairman" style="display:none;"></a> 
								       <a class="silence" style="display:none;"></a>
                                       <a class="unmute" style="display:none;"></a> 
								   {/if}
							   </div>
							   {if mt.callState==0}
							     <div class="immediacally-status">正在呼叫中...</div>
							   {else}
							      <div class="immediacally-status" style="display:none;">正在呼叫中...</div>
							   {/if}
						</div>
					</div>
				</div>
		</div>
	</li>
   {/each}
</script>

8 楼 zzzppp123999 2013-05-30 09:56

log.debug("测试");log.debug("测试");

7 楼 liu_qchao 2013-05-30 08:39

有点像ExtJS的模板，不过功能比较弱，下一步可以考虑支持运算符、表达式和内建函数

6 楼 clxy 2013-05-30 08:15

html模板有个巨大的优势是直观，用浏览器直接打开，所见（基本上大概）即所得。
json模板也许速度会快，但没有了这个优势。特别是复杂的界面，加上循环和分歧等，貌似不大乐观。

5 楼 lihao312 2013-05-29 18:13

lysvanilla 写道

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

请注意var transform = {'tag':'li','html':'${name} (${age})'};
这是转换规则

不好意思刚刚看到

4 楼 lysvanilla 2013-05-29 18:12

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

请注意var transform = {'tag':'li','html':'${name} (${age})'};
这是转换规则

3 楼 wangguo 2013-05-29 18:11

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

可以指定
var transform = {'tag':'li','html':'${name} (${age})'};

2 楼 lihao312 2013-05-29 18:11

1 楼 lihao312 2013-05-29 18:09

这个？可以转化其他的？比较不是ul是div呢？

发表评论

您还没有登录,请您登录后再发表评论

6顶4踩